<template>
	<div class="role">
		<div class="container">
			<STform :ref-obj.sync="searchInfo.ref" :data="searchInfo.data"  :field-list="searchInfo.searchFormList" 
				:listTypeInfo="dictList" :inline="true" :rules="searchInfo.rules" label-width=" ">
				<template slot="form-btnSearch">
					<el-button type="primary" @click="doSearch">查询</el-button>
				</template>
			</STform>
			<STtable size="mini" :data.sync="tableData" :isExpand="true" :field-list="tables" @doRefresh="fetchData" :pagination="pagination" :loading="loading" @handleEvent="handleEvent">
				<template slot="col-shipstatus" slot-scope="scope">{{(dicts.sysShipStatus[scope.row.shipstatus])? dicts.sysShipStatus[scope.row.shipstatus]:"-"}}</template>
				<template slot="col-status" slot-scope="scope">{{(dicts.sysPayStatus[scope.row.status])? dicts.sysPayStatus[scope.row.status]:"-"}}</template>
				<template slot="col-paytype" slot-scope="scope">{{(dicts.sysPayType[scope.row.paytype])? dicts.sysPayType[scope.row.paytype]:"-"}}/{{scope.row.channel}}</template>
				<template slot="col-star" slot-scope="scope">{{(scope.row.star)? scope.row.star.star+"["+scope.row.starid+"]":"-"}}</template>
				<template slot="col-user" slot-scope="scope">{{(scope.row.user)? scope.row.user.nick+"["+scope.row.userid+"]":"-"}}</template>
				<template slot="col-address" slot-scope="scope">{{(scope.row.address)? scope.row.address.name+"/"+scope.row.address.tel:"-"}}</template>
				<template slot="col-expand" slot-scope="scope">
					 <el-table :data="scope.row.items" style="width: 100%" size="mini" >
						  <el-table-column align="center" prop="refid" label="商品ID"  width="100"> </el-table-column>
					    <el-table-column align="center" prop="title" label="商品名称" width="180"></el-table-column>
					    <el-table-column align="center" prop="price" label="单价" width="180"></el-table-column>
					    <el-table-column align="center" prop="nums" label="购买数量" width="180"></el-table-column>
						  <el-table-column align="center" prop="amount" label="付款总额" width="180"></el-table-column>
						  <el-table-column align="center" prop="isvirtual" label="是否虚拟物品" width="180"></el-table-column>
						  <el-table-column align="center" prop="desc" label="商品描述"></el-table-column>
						  <el-table-column align="center" prop="remark"  label="个性化备注"></el-table-column>
					 </el-table>
				</template>
			</STtable>
		</div>
	</div>
</template>

<script>
	import STtable from '@/components/common/STtable'
	import STform from '@/components/common/STform'
	import orderAPI from '@/api/app/ucenter/order.js'
	import {showToast} from '@/libs/core.js'
	import consts from './consts.js'
	import {mapState} from 'vuex' //本地取信息
	export default {
		components: {STtable,STform},
		data() {
			return {
				page: {
					popWidth: '85%',
					popTitle: null,
					dialogVisible: false,
					pop: 0
				},
				searchInfo: {
					ref: null,
					data: {
					},
					rules: {},
					searchFormList: consts.searchFormList // 查询列表表单列 数据
				},
				sysPageForm: { //搜索实际请求的字段
					name: '',
				},
				details: null, //单项数据
				loading: true,
				tableData: [], //列表数据
				tables:consts.tables,
				pagination: { // 分页数据
					pageNum: 1, // 当前页
					pageSize: 20, // 每页条数
					total: 0, //合计条数
					sorts: {id: 'DESC'},//排序信息
					pageSizes: [5, 10, 20, 50, 100], // 分页数量列表
					sizeChange: (val) => {
						this.onSizeChange(val)
					},
					currentChange: (pageNum) => {
						this.onCurrentChange(pageNum)
					},
					sortsChange:(sorts) => {
						this.onSortsChange(sorts);
					},
				}
			}
		},
		async created() {
			await this.fetchData();
			this.loading = false;
		},
		computed: {
			dictList() {
				return this.$store.getters["dictSrv/list"];
			},
			...mapState({
        dicts: (state) => {
          return state.dictSrv.data;
        }
      })
		},
		methods: {
			doSearch() {
				const data = this.searchInfo.data;
				Object.assign(this.sysPageForm, data);
				this.fetchData(this.sysPageForm);
			},
			onSizeChange(pageSize) {
				this.pagination.pageSize = pageSize
				this.fetchData(this.sysPageForm)
			},
			onCurrentChange(pageNum) {
				this.pagination.pageNum = pageNum
				this.fetchData(this.sysPageForm)
			},
			onSortsChange(sorts) {
				this.pagination.sorts = sorts;
				this.fetchData(this.sysPageForm);
			},
			async fetchData(params) {
				this.loading = false;
				const { pageNum, pageSize, sorts } = this.pagination;
				const ojson = await orderAPI.getList({start:(pageNum - 1)*pageSize, sorts:sorts, limit:pageSize, ...params});
				if (ojson) {
					this.tableData = ojson.dataset;
					this.pagination.total = ojson.total;
				}
				this.loading = false;
				this.hidePop();
			},
			handleFormEvent(type, data) {
				switch (type) {
					case 'fileChange':
						break;
				}
			},
			handleEvent(type, data) {
				switch (type) {
					case 'tableCheck':
						break;
				}
			},
			hidePop() {
				this.page.dialogVisible = false;
				this.page.pop = 0;
			}
		}
	}
</script>
<style>
	.el-table__expanded-cell{
		padding: 0px !important;
	}
</style>